<template>
  <!-- 运费详情页 -->
  <div>
    <!-- 提示 -->
    <div class="pad-10 bg-color-white flex">
      <span class="font-12 font-color-3">模版名称</span>
      <span class="font-12 font-color-9 mar-l-30">{{ templateName }}</span>
    </div>
    <!-- 默认配送区域 -->
    <div class="table-area pad-10 mar-t-15" v-if="countryFlag">
      <div class="pad-t-10 pad-b-10">
        <span class="font-14 font-color-3 font-w">默认配送区域<span class="font-11 font-color-9">(除指定配送区域和不支持配送区域以外)</span></span>
      </div>
      <div class="text-align-c font-14">
        <van-row>
          <van-col span="6" class="font-orange">首件(件)</van-col>
          <van-col span="6">运费(元)</van-col>
          <van-col span="6" class="font-orange">续件(件)</van-col>
          <van-col span="6">运费(元)</van-col>
          <van-col span="6">{{defaultDeliveryInfo['startItemStandard']}}</van-col>
          <van-col span="6">{{defaultDeliveryInfo['startItemFee']}}</van-col>
          <van-col span="6">{{defaultDeliveryInfo['addItemStandard']}}</van-col>
          <van-col span="6">{{defaultDeliveryInfo['addItemFee']}}</van-col>
        </van-row>
      </div>
    </div>
    <!-- 指定配送区域 -->
    <div class="table-area pad-10 mar-t-15">
      <div class="pad-t-10">
        <span class="font-14 font-color-3 font-w">指定配送区域</span>
      </div>
      <div class="text-align-c font-14  mar-t-10" v-for="(item, index) of templateDetailsList" :key="index">
        <van-row>
          <van-col span="24">
            <div class="pad-l-4 pad-r-4 font-12">{{item.areaNames}}</div>
          </van-col>
          <van-col span="6" class="font-orange">首件(件)</van-col>
          <van-col span="6">运费(元)</van-col>
          <van-col span="6" class="font-orange">续件(件)</van-col>
          <van-col span="6">运费(元)</van-col>
          <van-col span="6">{{item.startItemStandard}}</van-col>
          <van-col span="6">{{item.startItemFee}}</van-col>
          <van-col span="6">{{item.addItemStandard}}</van-col>
          <van-col span="6">{{item.addItemFee}}</van-col>
        </van-row>
      </div>
    </div>
    <!-- 不支持配送区域 -->
    <div class="table-area pad-10 mar-t-15" v-if="notDeliverAreaNames">
      <div class="pad-t-10">
        <span class="font-14 font-color-3 font-w">不支持配送区域</span>
      </div>
      <div class="text-align-c font-14  mar-t-10">
        <van-row>
          <van-col span="24">
            <div class="pad-l-4 pad-r-4 font-12">{{notDeliverAreaNames}}</div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { deliveryTemplate } from '@/api/common.js'
export default {
  data() {
    return {
      templateDetailsList: [], // 支持配送区域
      notDeliverAreaNames: '', // 不支持配送区域
      defaultDeliveryInfo: {}, // 默认配送信息
      templateId: '',
      countryFlag: '', // 运费模版类型 1:
      templateName: ''
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    this.$pt.showLoading()
    this.templateId = this.getCurrentPage().query.deliveryTemplateId
    this.deliveryTemplate()
  },
  methods: {
    // 获取运费模版信息
    deliveryTemplate() {
      let data = {
        templateId: this.templateId
      }
      deliveryTemplate(data).then(res => {
        this.templateName = res.data.templateName
        this.countryFlag = res.data.countryFlag
        this.templateDetailsList = res.data.templateDetailsList
        this.notDeliverAreaNames = res.data.notDeliverAreaNames
        this.$set(this.defaultDeliveryInfo, 'startItemStandard', res.data.startItemStandard)
        this.$set(this.defaultDeliveryInfo, 'startItemFee', res.data.startItemFee)
        this.$set(this.defaultDeliveryInfo, 'addItemStandard', res.data.addItemStandard)
        this.$set(this.defaultDeliveryInfo, 'addItemFee', res.data.addItemFee)
        this.$pt.hideLoading()
      }).catch(() => {
        this.$pt.hideLoading()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table-area{
  background: #fff;
    /deep/ ._van-row {
    .van-col {
      border: 1px solid #f2f2f2;
      // margin-left: -1px;
      margin-top: -1px;
      padding-top: 4px;
      padding-bottom: 4px;
      // box-sizing: border-box;
    }
  }
}

</style>